<!doctype html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>图片缩放工具 - WASM 版本</title>
</head>

<body>
    <div id="app">
        <div class="container">
            <h1>图片缩放工具</h1>
            <div class="content">
                <div class="section">
                    <h2>原始图片</h2>
                    <div class="image-container empty" id="originalImage">
                        <div>
                            <div style="font-size: 40px; margin-bottom: 10px;">📤</div>
                            <p>点击或拖拽上传图片</p>
                        </div>
                    </div>
                    <input type="file" id="imageInput" accept="image/*" style="display: none;" />
                    <div class="stats" id="originalStats" style="display: none;">
                        <div class="stat-row">
                            <span class="stat-label">尺寸:</span>
                            <span id="origSize">-</span>
                        </div>
                        <div class="stat-row">
                            <span class="stat-label">分辨率:</span>
                            <span id="origDimensions">-</span>
                        </div>
                        <div class="stat-row">
                            <span class="stat-label">大小:</span>
                            <span id="origFileSize">-</span>
                        </div>
                    </div>
                </div>
                <div class="section">
                    <h2>缩放图片</h2>
                    <div class="image-container empty" id="resizedImage">
                        <div style="color: #ccc;">
                            <div style="font-size: 40px; margin-bottom: 10px;">📥</div>
                            <p>缩放结果</p>
                        </div>
                    </div>
                    <div class="stats" id="resizedStats" style="display: none;">
                        <div class="stat-row">
                            <span class="stat-label">尺寸:</span>
                            <span id="resSize">-</span>
                        </div>
                        <div class="stat-row">
                            <span class="stat-label">分辨率:</span>
                            <span id="resDimensions">-</span>
                        </div>
                        <div class="stat-row">
                            <span class="stat-label">大小:</span>
                            <span id="resFileSize">-</span>
                        </div>
                        <div class="stat-row">
                            <span class="stat-label">压缩率:</span>
                            <span id="compressRatio">-</span>
                        </div>
                        <div class="stat-row">
                            <span class="stat-label">耗时:</span>
                            <span id="resizeTime">-</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="controls">
                <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px;">
                    <div class="control-group">
                        <label>目标宽度 (px)</label>
                        <input type="number" id="targetWidth" value="400" min="1" max="4000" />
                    </div>
                    <div class="control-group">
                        <label>目标高度 (px)</label>
                        <input type="number" id="targetHeight" value="300" min="1" max="4000" />
                    </div>
                    <div class="control-group">
                        <label>缩放算法</label>
                        <select id="filterType">
                            <option value="lanczos3">Lanczos3 (推荐, 质量最佳)</option>
                            <option value="cubic">立方 (质量好)</option>
                            <option value="linear">线性</option>
                            <option value="gaussian">高斯</option>
                            <option value="nearest">最近邻 (速度最快)</option>
                        </select>
                    </div>
                </div>
                <div class="control-group">
                    <label style="display: flex; align-items: center; gap: 10px; cursor: pointer;">
                        <input type="checkbox" id="aspectRatio" checked />保持宽高比
                    </label>
                </div>
                <div class="button-group">
                    <button class="btn-primary" id="resizeBtn">🚀 开始缩放</button>
                    <button class="btn-secondary" id="downloadBtn" style="display: none;">⬇️ 下载图片</button>
                    <button class="btn-secondary" id="resetBtn">🔄 重置</button>
                </div>
                <div class="info-box">
                    💡 提示: 支持 PNG、JPEG、GIF 等常见图片格式。缩放在浏览器本地执行，无需上传到服务器。
                </div>
                <div class="loading" id="loading">
                    <div class="spinner"></div>
                    <p>正在处理图片...</p>
                </div>
                <div class="error" id="error"></div>
                <div class="note" id="note" style="display: none;"></div>
            </div>
        </div>
    </div>
    <script type="module" src="./src/main.js"></script>
</body>

</html>